<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h1>{{ list.age[0][0] }}</h1>
        <p>{{ list.age[2] }}</p>
        <ul>
            <li>{{ list.name.na }}</li>
            <li>{{ list.name.na }}</li>
            <li>{{ list.age[1] }}</li>
        </ul>
    </div>
</body>
<script>

/* 解决002中的问题，不能使用数组

    伪代码演示： 

        // array: 真实的数组     path: 0],0]        prop1: 索引

        res1 = array[prop1]
        res2 = res1[prop2]
*/



let data = {
    list: {
        name: {
            na: '李斯'
        },
        age: [[122, 34], 23, 334]
    }
}

let dom = document.querySelector('#app');
let parent = dom.parentNode;
let template = dom.cloneNode(true);


function replaceData(dom) {
    let children = dom.childNodes;
    for(let i = 0; i < children.length; i++) {
        let type = children[i].nodeType;
        if (type === 1) {
            replaceData(children[i]);
        }
        else if (type === 3) {
            let value = children[i].nodeValue;
            value = value.replace(/\{\{(.*?)\}\}/g, (_, g)=>{
                // g = 'list.name'
                return getPathData(data, g);
            })
            children[i].nodeValue = value;
        }
    }
}
replaceData(template);
parent.replaceChild(template, dom);


// 递归遍历得到复杂的数据类型
function getPathData(obj, path) {
    path = (path+'').trim();
    path = path.split('.');
    let prop;
    let res = obj;
    let array = [];
    let pathArray;

    
    while(prop = path.shift()) {
        if (prop.search(/\[\d\]/g) < 0) {   // 表明不存在数组
            res = res[prop];
        }
        else {
            pathArray = prop.split('[');
            res = getPathData1(res[pathArray.shift()], pathArray)
        }
    }
    return res;
}


/* 算法
    // array: 真实的数组     path: 0],0]        prop1: 索引

    res1 = array[prop1]
    res2 = res1[prop2]
*/
function getPathData1(array, path) {
    let res = array;
    let prop;
    let index;
    while(prop = path.shift()) {
        index = prop.match(/\d/);
        res = res[index - 0];
    }
    return res;
}


/* 总结 
    1. 使用相同的思想，可以直接使用数组和对象的复杂类型

    2. 这个算法包含了大量的正则表达式的运用

    3. 存在的问题

        -1 vue 使用的是 虚拟dom，而现在我们使用的是clone的dom
        
*/
</script>
</html>